<div class="underlying" style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;">
  <div class="table">
    <!-- 头部Table -->
    <nz-table #nestedTable
      style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;"
      [nzData]="listOfData" class="designTable" [nzShowPagination]='false'
      [nzScroll]="{ y: '830px',x: '2225px' }">
      <thead class="tableHeard" style="text-align: center !important;">
        <tr style="text-align: center !important;">
          <th nzWidth="50px"></th>
          <th nzWidth="50px"></th>
          <th nzWidth="150px">
            <button nz-button nzTrigger="click" nz-dropdown [nzDropdownMenu]="menu4">治具狀態
              <i nz-icon nzType="down"></i>
            </button>
            <nz-dropdown-menu #menu4="nzDropdownMenu" class="drop">
              <ul nz-menu class="dropdownMenu">
                <li nz-menu-item class="Li">
                  <nz-radio-group [(ngModel)]="radioValue">
                    <label nz-radio [ngStyle]="style" nzValue="All" (click)="doingForm()">All</label>
                    <label nz-radio [ngStyle]="style" nzValue="待入库" (click)="doingForm()">待入库</label>
                    <label nz-radio [ngStyle]="style" nzValue="待領取" (click)="doingForm()">待領取</label>
                    <label nz-radio [ngStyle]="style" nzValue="部分領取" (click)="doingForm()">部分領取</label>
                    <label nz-radio [ngStyle]="style" nzValue="已領取" (click)="doingForm()">已領取</label>
                  </nz-radio-group>
                </li>
              </ul>
            </nz-dropdown-menu>
          </th>
          <th nzWidth="250px" nzCustomFilter>工聯單號
            <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
              [nzDropdownMenu]="menu"  nzTrigger="click"
              nzPlacement="bottom" [nzClickHide]="false" nzTableFilter></i>
          </th>
          <th nzWidth="250px" nzCustomFilter>治具名稱
            <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
              [nzDropdownMenu]="menu1"  nzTrigger="click"
              nzPlacement="bottom" [nzClickHide]="false" nzTableFilter></i>
          </th>
          <th nzWidth="285px" nzCustomFilter>19碼
            <i nz-th-extra class="ant-table-filter-icon" nz-icon nz-dropdown #dropdown="nzDropdown" nzType="search"
              [nzDropdownMenu]="menu2"  nzTrigger="click"
              nzPlacement="bottom" [nzClickHide]="false" nzTableFilter></i>
          </th>
          <th nzWidth="100px">數量</th>
          <th nzWidth="250px">入庫時間</th>
          <th nzWidth="150px">治具交期</th>
          <th nzWidth="250px">領取時間</th>
          <th nzWidth="100px">領取數量</th>
          <th nzWidth="200px">費用Charge部門</th>
          <th nzWidth="140px">備註</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <ng-container>
          <tr id="first" *ngFor="let item of listOfData let key = index">
            <!-- new -->
            <td style="padding-left: 4px;text-align: left; height:45px">
              <a *ngIf="item.ruku_time === ''" class="new"></a>
            </td>
            <!-- 领取治具 -->
            <td>
              <a class="receive" (click)="receive(item)"
                *ngIf="item.lingqu_count<item.quatity || item.lingqu_count==0"></a>
              <a class="receive1" *ngIf="item.lingqu_count==item.quatity"></a>
            </td>
            <!-- 治具状态 -->
            <td>
              <span style="color:#2d9ce6" *ngIf="item.ruku_time === '' ">待入庫</span>
              <span style="color:#FACA00"
                *ngIf="item.lingqu_count < item.quatity && item.lingqu_count !== '' ">部分領取</span>
              <span style="color:#ffffff" *ngIf="item.lingqu_count == '' && item.ruku_time !== ''">待領取</span>
              <span style="color:#21CC97" *ngIf="item.lingqu_count == item.quatity">已領取</span>
            </td>
            <!-- 工联单号 -->
            <td style="max-width: 250px;text-align: left;text-indent: 20px;">{{item.union_order}}</td>
            <!-- 治具名稱 -->
            <td
              style="cursor:pointer;max-width: 250px;text-indent: 20px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
              title={{item.name}}>{{item.name}}</td>
            <!-- 19碼 -->
            <td title={{item.code19.split(splitJudge)[0]}}~{{item.code19.split(splitJudge)[1]}}>
              {{item.code19.split(",")[0]}}
            </td>
            <!-- 數量 -->
            <td>{{item.quatity}}</td>
            <!-- 入庫時間 -->
            <td class="fontColor">
              <a class="addDate" (click)="addDate(item)" *ngIf=" !item.ruku_time || item.ruku_time === ''"></a>
              {{item.ruku_time}}
            </td>
            <!-- 治具交期 -->
            <td>{{item.delivery_date}}</td>
            <!-- 領取時間 -->
            <td>{{item.lingqu_time}}</td>
            <!-- 領取數量 -->
            <td>{{item.lingqu_count}}</td>
            <!-- 費用Charge部門 -->
            <td>{{item.charge_department}}</td>
            <!-- 備註 -->
            <td (click)="addRemark(item)"
              style="text-decoration:underline;cursor:pointer;max-width: 140px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
              title={{item.ruku_beizhu}}>
              <a class="addRemark" *ngIf=" !item.ruku_beizhu || item.ruku_beizhu === ''"></a>
              {{item.ruku_beizhu}}</td>
          </tr>
        </ng-container>
      </tbody>
    </nz-table>
    <!-- 添加入库时间 -->
    <nz-modal class="addTime" [(nzVisible)]="addTime" nzTitle="入庫時間" (nzOnCancel)="CancelAddTime()"
      (nzOnOk)="addTimeOk()" [nzOkLoading]="isOkLoadingTime" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div>
        <textarea nz-input [(ngModel)]="time" [nzAutosize]="{ minRows: 2, maxRows: 6 }" class="deRemark"></textarea>
        <div style="margin:24px 0;"></div>
      </div>
    </nz-modal>
    <!-- 领取治具 -->
    <nz-modal class="addTime" [(nzVisible)]="addLqzj" nzTitle="領取治具" (nzOnCancel)="CancelReceive()"
      (nzOnOk)="ReceiveOk()" [nzOkLoading]="isOkLoadingTime" style="text-align:center" nzWidth='600px'
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'300px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}"
      style="background: chartreuse !important;height: 400px !important;">
      <div>
        <div style="padding-top: 30px;margin-left: -144px;">當前治具可領取數量
          {{lingqu_count ==='' ? quatity : quatity-lingquTotal}}/{{quatity}}</div>
        <div class="input_first" style="margin-top: 30px;">
          <div class="right">領取時間：</div>
          <nz-date-picker [nzAllowClear]=false nzShowTime nzFormat="yyyy-MM-dd HH:mm" [(ngModel)]="startValue"
            nzPlaceHolder="Time" (ngModelChange)="onStartChange($event)"
            [nzDisabledDate]="disabledDate"
            [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }">
          </nz-date-picker>
        </div>
        <div class="input_first" style="margin-top: 30px;">
          <div class="right">領取數量：</div>
          <input type="text" [(ngModel)]="lqsl" value='' name=''>
        </div>
        <div class="input_first" style="margin-top: 30px;">
          <div class="right">領取人：</div>
          <input type="text" [(ngModel)]="lingquPerson" value='' name=''>
        </div>
      </div>
    </nz-modal>
    <!-- 确认领取治具-->
    <nz-modal [(nzVisible)]="twoOk" nzTitle="領取治具" (nzOnCancel)="twoOkCancel()" (nzOnOk)="TwoOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'30px'}">
      <p style="padding-top: 50px;">確認領取治具嗎？</p>
      <p>{{lingquUnionorder}}</p>
    </nz-modal>
    <!-- 添加备注 -->
    <nz-modal class="designRemark" [(nzVisible)]="beizhuRemark" nzTitle="成品入庫備註" (nzOnCancel)="CancelAddRemark()"
      (nzOnOk)="addRemarkOk()" [nzOkLoading]="isOkLoadingRemark" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div>
        <textarea nz-input [(ngModel)]="rukuRemark" [nzAutosize]="{ minRows: 2, maxRows: 6 }"
          class="deRemark"></textarea>
        <div style="margin:24px 0;"></div>
      </div>
    </nz-modal>
    <!-- 工联单号筛选 -->
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <div class="search-box" style="background:#487377; margin-top: -18px;">
        <input type="text" nz-input placeholder="come on 工聯單號" [(ngModel)]="searchUnion" />
        <button nz-button nzSize="small" nzType="primary" (click)="searchOkUnion()" class="search-button">
          Search
        </button>
        <button nz-button nzSize="small" (click)="resetUnion()" class="search-button" style="margin-right:0px;">Reset</button>
      </div>
    </nz-dropdown-menu>
    <!-- 治具名稱筛选 -->
    <nz-dropdown-menu #menu1="nzDropdownMenu">
      <div class="search-box" style="background:#487377; margin-top: -18px;">
        <input type="text" nz-input placeholder="come on 治具名稱" [(ngModel)]="searchName" />
        <button nz-button nzSize="small" nzType="primary" (click)="searchOkName()" class="search-button">
          Search
        </button>
        <button nz-button nzSize="small" (click)="resetName()" class="search-button" style="margin-right:0px;">Reset</button>
      </div>
    </nz-dropdown-menu>
    <!-- 19碼筛选 -->
    <nz-dropdown-menu #menu2="nzDropdownMenu">
      <div class="search-box" style="background:#487377; margin-top: -18px;">
        <input type="text" nz-input placeholder="come on 19碼" [(ngModel)]="search19" />
        <button nz-button nzSize="small" nzType="primary" (click)="searchOk19()" class="search-button">
          Search
        </button>
        <button nz-button nzSize="small" (click)="reset19()" class="search-button" style="margin-right:0px;">Reset</button>
      </div>
    </nz-dropdown-menu>
  </div>
</div>
